<template>
    <div style="width:100%;height:100%;" id="user_flow"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    name: 'userFlow',
    mounted () {
        this.init();
    },
    created: function(){
        
        // let that = this;
        // setInterval(function (){
        //     that.option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
        //     that.option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
        //     that.option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
        //     that.option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
        //     let userFlow = echarts.init(document.getElementById('user_flow'));
        //     userFlow.setOption(option,true);
        // },2000);
    },
    methods: {
        init(){
            const option = {
                title: {
                text: '平台'
                },
                        tooltip : {
                            formatter: "{a} <br/>{c} {b}"
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        series : [
                            {
                                name: '用户参与率',
                                center: ['24%', '50%'],
                                // radius: '25%',//大小
                                type: 'gauge',
                                detail: {
                                    formatter:'{value}%',
                                    fontSize: 18,
                                    
                                },
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        width: 5
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    splitNumber: 5,
                                    length: 15,        // 属性length控制线长
                                    lineStyle: {        // 属性lineStyle控制线条样式
                                        color: 'auto'
                                    }
                                
                                },
                                splitLine: {           // 分隔线
                                    length: 10,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        color: 'auto'
                                    }
                                },
                                data: [{value: 50, name: '用户参与率'}]
                            },
                            {
                                name: '正确率对比',
                                center: ['76%', '50%'],
                                // radius: '25%',//大小
                                min: -5,
                                max: 45,
                                type: 'gauge',
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        width: 5
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    splitNumber: 5,
                                    length: 15,        // 属性length控制线长
                                    lineStyle: {        // 属性lineStyle控制线条样式
                                        color: 'auto'
                                    }
                                
                                },
                                splitLine: {           // 分隔线
                                    length: 15,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        color: 'auto'
                                    }
                                },
                                detail: {
                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    formatter:'{value}%',fontSize: 18,
                                    borderRadius: 3,
                                    textBorderWidth: 2,
                                    textShadowBlur: 2,
                                    textShadowColor: '#fff',
                                    textShadowOffsetX: 0,
                                    textShadowOffsetY: 0,
                                    fontFamily: 'Arial',
                                    width: 100,
                                    color: '#000',
                                },
                                data: [{value: 25, name: '正确率对比'}]
                            },
                            {
                                name: '投放率对比',
                                type: 'gauge',
                                // center: ['77%', '50%'],    // 默认全局居中
                                // radius: '25%',
                                min: 0,
                                max: 4000,
                                startAngle:134,
                                endAngle: 46,
                                splitNumber: 8,
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        width: 8
                                    }
                                },
                                
                                axisTick: {            // 坐标轴小标记
                                    splitNumber: 5,
                                    length: 5,        // 属性length控制线长
                                    lineStyle: {        // 属性lineStyle控制线条样式
                                        color: 'auto'
                                    }
                                
                                },
                                axisLabel: {
                                    formatter:function(v){
                                        switch (v + '') {
                                            case '0' : return '0';
                                            case '500' : return '500';
                                            case '1500' : return '1.5K';
                                            case '2500' : return '2.5K';
                                            case '4000' : return '4K+';
                                        }
                                    }
                                },
                                splitLine: {           // 分隔线
                                    length: 15,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        color: 'auto'
                                    }
                                },
                                pointer: {
                                    width:2
                                },
                                detail: {
                                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    formatter: function (value) {
                                        return value+ '台';
                                    },
                                    fontSize: 18,
                                    borderRadius: 3,
                                    textBorderWidth: 2,
                                    textShadowBlur: 2,
                                    textShadowColor: '#fff',
                                    textShadowOffsetX: 0,
                                    textShadowOffsetY: 0,
                                    fontFamily: 'Arial',
                                    width: 100,
                                    color: '#000',
                                    rich: {}
                                },
                                title : {
                                    show: true
                                },
                                data:[{value: 500,name: '台'}]
                            },
                            {
                                name: '回收率',
                                type: 'gauge',
                                //center : ['77%', '50%'],    // 默认全局居中
                                // radius : '25%',
                                min: 0,
                                max: 20000,
                                startAngle: 315,
                                endAngle: 225,
                                splitNumber: 10,
                                axisLine: {            // 坐标轴线
                                    lineStyle: {       // 属性lineStyle控制线条样式
                                        width: 8
                                    }
                                },
                                axisTick: {            // 坐标轴小标记
                                    show: true
                                },
                                axisLabel: {
                                    formatter:function(v){
                                        switch (v) {
                                            case 5000 : return '5K';
                                            case 10000 : return '1W';
                                            case 20000 : return '2W+';
                                        }
                                    }
                                },
                                splitLine: {           // 分隔线
                                    length: 15,         // 属性length控制线长
                                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                        color: 'auto'
                                    }
                                },
                                pointer: {
                                    width:2
                                },
                                title: {
                                    show: false
                                },
                                detail: {
                                    show: false
                                },
                                data:[{value: 5000, name: '回收率'}]
                            }
                        ]
                    };
            let userFlow = echarts.init(document.getElementById('user_flow'));
            userFlow.setOption(option,true);
            
            window.addEventListener('resize', function () {
                userFlow.resize();
            });
        },
    }
};
</script>
